<template>
  <view class="h-screen bg-gray-50 w-11/12 mx-auto">
    <!-- 头像区域 -->
    <QqhImg />

    <QqhBaseInfoCart class="mt-3" :userData="memberStore.profile!" :editable="true" />

    <!-- 认证信息 -->
    <view class="bg-white mt-2 rounded-lg">
      <view class="p-4">
        <view class="text-gray-600 mb-2">双重认证 ({{ userInfo.verifiedCount }}/2)</view>
        <view
          class="flex items-center justify-between py-3 border-b border-gray-100"
          v-for="(item, index) in verificationList"
          :key="index"
          @tap="handleVerification(item)"
        >
          <view class="flex-1">
            <view>{{ item.name }}</view>
            <view class="text-gray-400 text-sm mt-1">{{ item.desc }}</view>
          </view>
          <view class="flex items-center">
            <text :class="item.verified ? 'text-blue-500' : 'text-gray-400'">
              {{ item.verified ? '已认证' : '未认证' }}
            </text>
            <text class="iconfont icon-right text-gray-300 ml-2"></text>
          </view>
        </view>
      </view>
    </view>

    <!-- 关于我自己 -->
    <QqhInfoCart
      title="关于我自己"
      title_icon="icon-guanyuwomen"
      :content="memberStore.profile!.aboutMe"
      :editable="true"
      @edit="handleEditAbout('关于我自己', memberStore.profile!.aboutMe, 50)"
    />
    <QqhInfoCart
      title="兴趣爱好"
      title_icon="icon-interest"
      :content="memberStore.profile!.interest"
      :editable="true"
      @edit="handleEditAbout('兴趣爱好', memberStore.profile!.interest, 50)"
    />
    <QqhInfoCart
      title="心仪的Ta"
      title_icon="icon-remen"
      :content="memberStore.profile!.loveRequirement"
      :editable="true"
      @edit="handleEditAbout('心仪的Ta', memberStore.profile!.loveRequirement, 50)"
    />
  </view>
</template>

<script lang="ts" setup>
import { ref } from 'vue'
import { useMemberStore } from '@/stores/modules/member'
const memberStore = useMemberStore()

// 处理删除图片
const handleDeleteImage = (url: string) => {
  // 从imgList中移除对应的url
  const imgList = memberStore.profile!.imgList.split(',')
  const index = imgList.indexOf(url)
  if (index !== -1) {
    imgList.splice(index, 1)
    memberStore.profile!.imgList = imgList.join(',')
    memberStore.updateProfile(memberStore.profile!)
  }
}

const handleEditAbout = (title: string, content: string, maxLength: number) => {
  // 跳转到编辑页面
  uni.navigateTo({
    url: `/pages/my-edit/edit-about/edit-about?title=${title}&content=${encodeURIComponent(
      content,
    )}&maxLength=${maxLength}`,
    events: {
      // 监听编辑页面保存事件
      save: function (result: string) {
        console.log('保存的内容:', result)
        // 处理保存的内容
      },
    },
  })
}
const userData = {
  gender: 'FEMALE',
  characterType: { name: '性格类型:狂躁' },
  loveRequirement:
    '阳光 帅气 有钱 爱我 阳光 帅气 有钱 爱我阳光 帅气 有钱 爱我阳光 帅气 有钱 爱我阳光 帅气 有钱 爱我',
  interest: '喜欢吃饭和睡懒觉，今天又起来完了，不行，快要迟到了，加油快跑',
  aboutMe: '每天睡不醒，不吃香菜，今天的kpi达到了吗，好像又胖了',
  userArticleViewResponse: {
    articleImg: [
      'https://www.wxmblog.com/devminio/oujili/2023/12/21/f209c77e-418a-4a40-8db5-bb58b9b608c1.jpg',
    ],
    articleContent: '今天动态很开心',
  },
  marriage: 'Unmarried',
  annualSalary: 'Ten_Two',
  profession: '互联网工程师',
  emotional: 'Single',
  city: '北京',
  height: '165',
  age: '32',
  constellation: '水瓶座',
  nickName: '减肥呀',
  educationalType: 'FullTime',
  education: 'Undergraduate',
  school: '北京科技大学',
  userAuthStatus: 'DOUBLE',
  imgList: [
    {
      imgUrl:
        'https://www.wxmblog.com/devminio/oujili/2023/12/21/c75d2098-b663-444e-9e16-a02b4625b93f.jpg',
      id: '1',
    },
    {
      imgUrl:
        'https://www.wxmblog.com/devminio/oujili/2023/12/21/f209c77e-418a-4a40-8db5-bb58b9b608c1.jpg',
      id: '2',
    },
  ],
  id: '432432432',
}
const userInfo = ref({
  avatar: '/static/default-avatar.png',
  nickname: '微信用户',
  age: 25,
  height: 140,
  constellation: '摩羯座',
  city: '深圳市',
  occupation: '学生',
  verifiedCount: 0,
  about: '5啦啦啦啦啦啦啦啦就来啦',
})

const basicInfo = {
  nickname: { label: '微信用户' },
  age: { label: '年龄', unit: '岁' },
  height: { label: '身高', unit: 'cm' },
  constellation: { label: '星座' },
  city: { label: '城市' },
}

const verificationList = ref([
  {
    name: '实名认证',
    verified: false,
    desc: '认证后配对成功率提升200%',
  },
  {
    name: '学历认证',
    verified: false,
    desc: '北京航空航天大学 博士·全日制',
  },
])

const goBack = () => {
  uni.navigateBack()
}

const chooseImage = () => {
  uni.chooseImage({
    count: 1,
    sizeType: ['compressed'],
    sourceType: ['album', 'camera'],
    success: (res) => {
      userInfo.value.avatar = res.tempFilePaths[0]
    },
  })
}

const handleEdit = (key: string) => {
  console.log('编辑', key)
  // 根据不同字段调用不同的编辑方式
  switch (key) {
    case 'about':
      uni.navigateTo({
        url: `/pages/edit-about/edit-about?content=${userInfo.value.about}`,
      })
      break
    // 其他字段的编辑处理...
  }
}

const handleVerification = (item: any) => {
  uni.showToast({
    title: `点击了${item.name}认证`,
    icon: 'none',
  })
}
</script>

<style lang="scss">
page {
  background-color: #f5f5f5;
}

.my-edit {
  .uni-page-head {
    display: none;
  }
}
</style>
